<template>
  <div id="RequiredMaterials">

    <div class="header-container">
      <h1>必备材料管理内容</h1>
      <el-input placeholder="请输入ID" prefix-icon="el-icon-search" v-model="meterial_id" size="medium"
          class="header-input" />
      <el-input placeholder="请输入材料标题" prefix-icon="el-icon-search" v-model="title" size="medium"
          class="header-input" />
      <el-select v-model="policy_title" placeholder="请选择医保政策" size="medium" class="header-select">
        <el-option v-for="item in medicalPolicyList" :key="item.medicalpolicy_id" :label="item.title"
            :value="item.title" />
      </el-select>
      <el-button id="search" type="primary" icon="el-icon-search" @click="search()" size="medium"
          class="header-btn">搜索</el-button>
      <el-button id="search" type="primary" icon="el-icon-search" @click="resetSearch()" size="medium"
          class="header-btn">重置</el-button>
      <el-button type="success" class="add-button header-btn" @click="addMaterial()" size="medium">新增材料</el-button>
    </div>

    <div class="table-container">
      <el-table :data="pm.list" border style="width: 100%" class="materials-table">
        <el-table-column fixed prop="meterial_id" label="ID" width="80" align="center">
        </el-table-column>

        <el-table-column prop="title" label="材料标题" min-width="200" show-overflow-tooltip>
        </el-table-column>

        <el-table-column prop="message" label="材料内容" min-width="300" show-overflow-tooltip>
        </el-table-column>

        <el-table-column prop="medicalPolicy.title" label="所属医保政策" min-width="200" show-overflow-tooltip>
        </el-table-column>

                 <el-table-column fixed="right" label="操作" width="150">
           <template slot-scope="scope">
             <el-button type="primary" icon="el-icon-edit" @click="updateMaterial(scope.row)">
             </el-button>
             <el-button type="danger" icon="el-icon-delete" @click="deleteMaterial(scope.row.meterial_id)">
             </el-button>
           </template>
         </el-table-column>
      </el-table>
    </div>

    <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="pm.totalRecords"
      :page-size="pm.pageSize" :current-page="pm.currentPageNum" :page-sizes="[5, 10, 20, 50]" @size-change="sizeChange"
      @current-change="pageChange" style="margin-top: 20px; text-align: center;">
    </el-pagination>

    <el-dialog title="编辑材料信息" :visible.sync="updateFormvisible" :modal="false" width="350px">
      <el-form :model="material" :label-width="'80px'">

        <el-form-item label="材料标题">
          <el-input v-model="material.title"></el-input>
        </el-form-item>

        <el-form-item label="材料内容">
          <el-input v-model="material.message" type="textarea" :rows="3"></el-input>
        </el-form-item>

        <el-form-item label="医保政策">
          <el-select v-model="material.medicalPolicy.medicalpolicy_id" placeholder="请选择医保政策">
            <el-option v-for="item in medicalPolicyList" :key="item.medicalpolicy_id" :label="item.title"
              :value="item.medicalpolicy_id">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelUpdate()">取 消</el-button>
        <el-button type="primary" @click="submmitUpdate()">提 交</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新增材料" :visible.sync="addFormvisible" :modal="false" width="350px">
      <el-form :model="material" :label-width="'80px'">

        <el-form-item label="材料标题">
          <el-input v-model="material.title"></el-input>
        </el-form-item>

        <el-form-item label="材料内容">
          <el-input v-model="material.message" type="textarea" :rows="3"></el-input>
        </el-form-item>

        <el-form-item label="医保政策">
          <el-select v-model="material.medicalPolicy.medicalpolicy_id" placeholder="请选择医保政策">
            <el-option v-for="item in medicalPolicyList" :key="item.medicalpolicy_id" :label="item.title"
              :value="item.medicalpolicy_id">
            </el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd()">取 消</el-button>
        <el-button type="primary" @click="submmitAdd()">提 交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import axios from 'axios';

export default {
  name: "RequiredMaterials",
  data() {
    return {
      meterial_id: null,
      title: "",
      policy_title: "",
      updateFormvisible: false,
      addFormvisible: false,
      pm: {
        currentPageNum: 1,
        totalRecords: 0,
        pageSize: 5,
        totalPageNum: 0,
        startIndex: 0,
        prePageNum: 0,
        nextPageNum: 0,
        list: [],
        startPage: 0,
        endPage: 0
      },
      material: {
        meterial_id: null,
        title: "",
        message: "",
        medicalPolicy: {
          medicalpolicy_id: null,
          title: "",
          message: ""
        }
      },
      medicalPolicyList: []
    }
  },
  mounted() {
    this.getMaterialPage(1);
    this.getMedicalPolicyList();
  },
  methods: {
    getMaterialPage(e) {
      axios.get("http://localhost:8080/getMaterialPage", { params: { num: e, size: this.pm.pageSize } }).then(res => {
        this.pm = res.data
      })
    },
    sizeChange(size) {
      this.pm.pageSize = size;
      this.getMaterialPage(1);
    },
    pageChange(num) {
      this.getMaterialPage(num);
    },
    deleteMaterial(meterial_id) {
      if (confirm("确定删除？")) {
        axios.delete("http://localhost:8080/deleteMaterial", { params: { meterial_id } }).then(res => {
          alert(res.data)
          this.getMaterialPage(1);
        })
      }
    },
    updateMaterial(mt) {
      this.updateFormvisible = true;
      this.material = mt;
      this.getMedicalPolicyList();
    },
    submmitUpdate() {
      axios.put("http://localhost:8080/updateMaterial", this.material).then(res => {
        alert(res.data);
        this.updateFormvisible = false;
        this.getMaterialPage(this.pm.currentPageNum);
        this.resetMaterial();
      });
    },
    addMaterial() {
      this.getMedicalPolicyList();
      this.addFormvisible = true;
    },
    cancelUpdate() {
      this.updateFormvisible = false;
      this.resetMaterial();
    },
    submmitAdd() {
      axios.post("http://localhost:8080/addMaterial", this.material).then(res => {
        alert(res.data);
        this.addFormvisible = false;
        this.getMaterialPage(this.pm.currentPageNum);
        this.resetMaterial();
      })
    },
    cancelAdd() {
      this.addFormvisible = false;
      this.resetMaterial();
    },
    getMedicalPolicyList() {
      axios.get("http://localhost:8080/getAllMedicalPolicy").then(res => {
        this.medicalPolicyList = res.data;
      })
    },
    resetMaterial() {
      this.material = {
        meterial_id: null,
        title: "",
        message: "",
        medicalPolicy: {
          medicalpolicy_id: null,
          title: "",
          message: ""
        }
      }
    },
    search() {
      axios.get("http://localhost:8080/getMaterialByConditions", { params: { meterial_id: this.meterial_id, title: this.title, policy_title: this.policy_title } }).then(res => {
        this.pm.list = res.data;
      })
    },
    resetSearch() {
      this.resetConditions();
      this.getMaterialPage(1);
    },
    resetConditions() {
      this.meterial_id = null;
      this.title = "";
      this.policy_title = "";
    }
  }
}
</script>

<style>
#RequiredMaterials {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.header-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.header-container h1 {
  font-size: 20px;
  margin-right: 24px;
  white-space: nowrap;
  margin-bottom: 0;
}

.header-input,
.header-select {
  width: 200px;
  height: 40px;
}

.header-btn {
  height: 40px;
  min-width: 90px;
  padding: 0 16px;
  font-size: 16px;
}

/* 表格样式修复 */
.table-container {
  margin-bottom: 20px;
  overflow-x: auto;
}

.materials-table {
  width: 100%;
}

.el-table {
  margin-bottom: 20px;
}

.el-table th {
  background-color: #f5f7fa !important;
  color: #606266;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  padding: 12px 0;
}

.el-table td {
  padding: 12px 0;
  text-align: left;
}

.el-table .cell {
  word-break: break-all;
  line-height: 1.5;
}

.el-table .el-button {
  padding: 5px 10px;
  font-size: 12px;
  margin: 0 2px;
}

/* 确保操作按钮正确显示 */
.el-table__fixed-right {
  background-color: #fff;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .header-container {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .header-input,
  .header-select {
    width: 100%;
    max-width: 300px;
  }
}
</style>